import React from 'react';
import { withRouter } from 'react-router-dom'
import { Card, Form, Input, InputNumber, Button, message } from 'antd';
import BreadcrumbBox from '@/components/Base/BreadcrumbBox';
import { checkRules } from '@/utils'
import { updateLoginPwd, updateTransPwd } from '@/api/system'
import './index.scss';

const Pass = (props) => {
  const { logout } = props.store;
  const { loginUserInfo } = props.store
  const breadcrumbList = ['个人中心','密码管理']
  const onFinish = async (values) => {
    try {
      let params = {
        ...values,
        userId: loginUserInfo.id
      }
      let res = await updateLoginPwd(params)
      if(res.code === 0) {
        message.destroy()
        message.success(res.data)
        logout();
      }
    } catch (error) {
      console.log(error)
    }
  };
  const onFinish2 = async (values) => {
    try {
      let params = {
        ...values,
        userId: loginUserInfo.id
      }
      let res = await updateTransPwd(params)
      if(res.code === 0) {
        message.success('修改成功')
        logout();
      }
    } catch (error) {
      console.log(error)
    }
  };
  return (
    <div className='pass-component'>
      <BreadcrumbBox list={breadcrumbList}></BreadcrumbBox>
      <div className='pass-main'>
        <Card title="修改登录密码" >
          <div className='pass-form'>
            <Form
              name="basic"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              onFinish={onFinish}>
              <Form.Item
                label="原始密码"
                name="oldPwd"
                rules={[
                  { required: true, message: '请输入原始密码' },
                  // checkRules('password')
                ]}
              >
                <Input.Password  placeholder="请输入原始密码" />
              </Form.Item>
              <Form.Item
                label="新设密码"
                name="newPwd"
                rules={[
                  { required: true, message: '请输入新设密码' },
                  // checkRules('password')
                ]}
              >
                <Input.Password placeholder="请输入新设密码" />
              </Form.Item>
              <Form.Item
                label="确认密码"
                name="confirmPwd"
                rules={[
                  { required: true, message: '请再次确认密码' },
                  ({ getFieldValue }) => {
                    return {
                      validator: (_, value) => {
                        if (getFieldValue("newPwd") === value) {
                          return Promise.resolve();
                        } else {
                          return Promise.reject(new Error("新密码和确认密码输入不一致，请重新输入！"));
                        } 
                      },
                    };
                  }
                ]}
              >
                <Input.Password placeholder="请再次确认密码" />
              </Form.Item>
              <Form.Item
                label="二次验证"
                name="secondValidate"
              >
                <InputNumber style={{width: '100%'}} placeholder="请输入二次验证码(未绑定请忽略)" />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </div>
        </Card>
         <div style={{marginBottom: '20px'}}></div>
        <Card title="修改交易密码" >
          <div className='pass-form'>
            <Form
              name="trans"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              onFinish={onFinish2}>
              <Form.Item
                label="原始密码"
                name="oldPwd"
                rules={[
                  { required: true, message: '请输入原始密码' },
                  // checkRules('password')
                ]}
              >
                <Input.Password  placeholder="请输入原始密码" />
              </Form.Item>
              <Form.Item
                label="新设密码"
                name="newPwd"
                rules={[
                  { required: true, message: '请输入新设密码' },
                  // checkRules('password')
                ]}
              >
                <Input.Password placeholder="请输入新设密码" />
              </Form.Item>
              <Form.Item
                label="确认密码"
                name="confirmPwd"
                rules={[
                  { required: true, message: '请再次确认密码' },
                  ({ getFieldValue }) => {
                    return {
                      validator: (_, value) => {
                        if (getFieldValue("newPwd") === value) {
                          return Promise.resolve();
                        } else {
                          return Promise.reject(new Error("新密码和确认密码输入不一致，请重新输入！"));
                        } 
                      },
                    };
                  }
                ]}
              >
                <Input.Password placeholder="请再次确认密码" />
              </Form.Item>
              <Form.Item
                label="二次验证"
                name="secondValidate"
              >
                <InputNumber style={{width: '100%'}} placeholder="请输入二次验证码(未绑定请忽略)" />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </div>
        </Card>
      </div>
    </div>
  )
}
export default withRouter(Pass)